[#macro profile
       title = "profile"
       desc = "profile"
       keywords = "profile"
       author = "leo"
]
[#assign ac=ACCOUNT/]
[@compress single_line=false]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
    <head>
        [#include "../common/meta.html"]
    </head>
<body>
    <div id="account">
		<div class="container">
			<div class="top">
				<dt class="left_wrap logo">
					<a href="${ui.base}"><img src="${base}/resources/themes/evernote/images/logo_144x36.gif" alt="everblog" border="0" /></a>
				</dt>
				<dt class="right_wrap">
					<a href="${ui.base}/account/logout" title="Logout" class="arrow left">Sign out (<span class='u_nickName'>${ac.nickName}</span>)</a>
				</dt>
				<dt class="clr">&nbsp;</dt>
			</div>
			<div class="container2">
				<dl class="banner" >
					<dt class="left_wrap">
						<img src="${base}/resources/themes/evernote/images/bnr_settings.gif" alt="Get started with jspblog"/>
					</dt>
					<dt class="right_wrap">
						<a href="${ui.base}" class="arrow left">Return Blog</a>
					</dt>
					<dt class="clr">&nbsp;</dt>
				</dl>
				<div class="content">
					<div class="column" style="width: 24%;">
						<div class="box profile" style="padding-right: 5px;"> 
							<ul class='vlist'>
								<li id='first' class='arrow qactive'><a href="javascript:;" rel="account_summary">Account summary</a></li>
								<li class='arrow'><a href="javascript:;" rel="personal_setting">Personal settings</a></li>
								<li class='arrow'><a href="javascript:;" rel="change_password">Change password</a></li>
								<li class='arrow'><a href="javascript:;" rel="my_comments">My comments</a></li>
								<li class='arrow'><a href="javascript:;" rel="email_setting">Email setting</a></li>
							</ul>
						</div>
					</div>
					<div class="column" style="width: 75%;">
						<div class="box load bg-e4f2f5"> 
							<!-- tabs start -->
							<div id="account_summary" class="rel">
								<h3>Account summary</h3>
								<table>
									<tr><th>Role :</th><td>${ac.role}</td></tr>
									<tr><th>Nick Name :</th><td class='u_nickName'>${ac.nickName}</td></tr>
									<tr><th>Email Address :</th><td class='u_email'>${ac.email}</td></tr>
									<tr><th>Account Name :</th><td>${ac.name}</td></tr>
					                <tr><th>Photo :</th><td class='u_photo'><img src="${ui.base}/resources/themes/evernote/photo/${ac.photo}.gif"/><span class='hide'>${ac.photo}</span></td></tr>
									[#if ac.descript??]<tr><th>Description :</th><td>${ac.descript}</td></tr>[/#if]
									<tr><th>Register Time :</th><td>${ac.createTime}</td></tr>
									<tr><th>Last Update Time :</th><td>${ac.lastUpdTime}</td></tr>
									<tr><th>Last Login Time :</th><td>${ac.lastLoginTime}</td></tr>
								</table>
							</div>
							<div id="personal_setting" class="rel">
								<h3>Personal settings</h3>
								<div class='form-tab'>
								<form id="account-update-form" action="${ui.base}/account/update" method="post">
							        <table>
									<tr>
					                    <th><label for="email">Email Address :</label></th>
					                    <td>${ac.email}</td>
					                </tr>
									<tr>
					                    <th><label for="name">Username :</label></th>
					                    <td>${ac.name}</td>
					                </tr>
									<tr>
							            <th><label for="nickName">Nick Name *</label></th>
							            <td><input id="nickName" name="nickName" value="${ac.nickName}" maxlength="15" class="txt" type="text"/></td>
							        </tr>
					                <tr>
						                <th><label for="photo">Photo *</label></th>
						                <td>
						                  	<ul id="mycarousel" class="jcarousel-skin-my"></ul>
											<input type="hidden" id="p-active" value="${ac.photo}"/>
						                  	<input type="hidden" id="photo" name="photo" value="${ac.photo}"/>
									    </td>
						            </tr>
									</table>
									<dl class="hr_solid_top">
							            <dt><i>* required fields</i></dt>
							            <dt style="text-align: right;"><input id="account-update-submit" class="button" value="Update" type="submit" /></dt>
									</dl>
									<div class="clr">&nbsp;</div>
								</form>
								</div>
								<div class="tips-tab hide">
									<p>Congratulations, Profile update success!</p>
								</div>
							</div>
							<div id="change_password" class="rel">
								<h3>Change password</h3>
								<div class='form-tab'>
								<form id="account-change-password-form" action="${ui.base}/account/password/change" method="post">
									<table>
										<tr>
											<th><label for="oldPass">Old Password *</label></th>
											<td><input id="oldPass" name="oldPass" type="password" class="txt" maxlength="18"/></td>
										</tr>
										<tr>
											<th><label for="pass">New Password *</label></th>
											<td><input id="pass" name="pass" type="password" class="txt" maxlength="18"/></td>
										</tr>
										<tr>
											<th><label for="confirmPass">Confirm Password *</label></th>
											<td><input id="confirmPass" name="confirmPass" type="password" class="txt" maxlength="18"/></td>
										</tr>
									</table>
									<dl class="hr_solid_top">
										<dt><i>* required fields</i></dt>
										<dt style="text-align: right;"><input id="account-change-password-submit" class="button" value="Change" type="submit" /></dt>
									</dl>
									<dt class='hide'><input id="xx" name="xx"/></dt>
									<div class="clr">&nbsp;</div>
								</form>
								</div>
								<div class="tips-tab hide">
									<p>Congratulations, Account password change success!</p>
								</div>
							</div>
							<div id="my_comments" class="rel">
								<h3>My comments</h3>
							</div>
							<div id="email_setting" class="rel">
								<h3>Email setting</h3>
							</div>
							<!-- tabs over -->
						</div>
					</div>
					<div class="clr">&nbsp;</div>
				</div>
			</div>
			<dl class="footer">
				<dt class="left_wrap">
					[@post_list categoryId=-1 listStyle='group_1_3'/]
				</dt>
				<dt class="right_wrap">${site.copyright}</dt>
				<dt class="clr">&nbsp;</dt>
			</dl>
		</div>
	</div>
	<script type="text/javascript" src="${base}/resources/3pt/all.js"></script>
	<script type="text/javascript" src="${base}/resources/themes/evernote/js/common-1.0.js"></script>
	<script type="text/javascript" src="${base}/resources/themes/evernote/js/account-1.0.js"></script>
</body>
</html>
[/@compress]
[/#macro]
